<ion-view view-title="章节阅读">
    <ion-content overflow-scroll="true">
        <div class="catalog-bg">
            <ion-slide-box on-slide-changed="slideHasChanged($index)" show-pager="true">
                <ion-slide>
                    <div class="catalog-top">
                        <span class="left">{{preReadTime}}min</span>
                        <span class=""><span class="f20 color-major">1</span>/{{cardIndex+2}}</span>
                        <span class="right">已阅读<span class="color-gray">{{cardReadRate}}%</span></span>
                    </div>
                    <div class="catalog-card">
                        <div class="catalog-card-content">
                            <h5 class="title f16"><span class="line"></span></h5>
                            <div class="catalog-book-content">
                                <img ng-src="{{bookImg}}" class="catalog-book-image" width="73"/>
                                <div class="catalog-book-author">
                                    <div class="name">{{bookName}}</div>
                                    <div class="abstract">{{remarks}}</div>
                                </div>
                            </div>
                            <div class="catalog-card-recommend">
                                {{bookSummary}}
                            </div>
                        </div>
                    </div>
                </ion-slide>
                <ion-slide>
                    <div class="catalog-top">
                        <span class="left">{{preReadTime}}min</span>
                        <span class=""><span class="f20 color-major">2</span>/{{cardIndex+2}}</span>
                        <span class="right">已阅读<span class="color-gray">{{cardReadRate}}%</span></span>
                    </div>
                    <div class="catalog-card">

                        <div class="catalog-card-content bg-gray-0">
                            <h5 class="title catalog"><span class="line">学习计划</span></h5>
                            <div class="catalog-card-bookname">
                                <div class="catalog-title">《{{bookName}}》</div>
                                <div>学习计划</div>
                            </div>
                            <ul class="catalog-ul">
                                <ion-scroll direction="y" scroll-height>
                                <li ng-repeat="chapter in chapterNames">
                                    <div class="catalog-card-schedule">{{chapter.chapterName}}</div>
                                    <div ng-repeat="cps in cardList">
                                        <div ng-if="chapter.chapterName==cps.chapterName">
                                            <span class="catalog-small-pop"></span>
                                            <span class="catalog-small-title">{{cps.cardName}}</span>
                                        </div>
                                    </div>
                                </li>
                                </ion-scroll>
                            </ul>
                            <a class="catalog-card-link" ng-click="openCatalogList()"><span class="color-major padd-r-10"><</span>阅读目录</a>
                        </div>
                    </div>
                </ion-slide>
                <ion-slide ng-repeat="card in cards">
                    <div class="catalog-top">
                        <span class="left">{{preReadTime}}min</span>
                        <span class=""><span class="f20 color-major">{{$index+3}}</span>/{{cardIndex+2}}</span>
                        <span class="right">已阅读<span class="color-gray">{{cardReadRate}}%</span></span>
                    </div>
                    <div class="catalog-card" ng-click="openBook(card)">
                        <div class="catalog-card-content bg-gray-0">
                            <img ng-src="{{card.cardImg}}" src="images/special/dj-020.png" height="100" class="catalog-chapter-image"/>
                            <h5 class="title catalog"><span class="line margin-r-10">{{card.cardName}}</span></h5>
                            <div class="catalog-chapter-content" ng-bind-html="card.cardContent | trustHtml"></div>
                            <a class="catalog-card-link" ng-click="openBook(card)"><span
                                    class="color-major padd-r-10"><</span>阅读本章节</a>
                        </div>
                    </div>
                </ion-slide>
            </ion-slide-box>
        </div>
    </ion-content>
</ion-view>